$button-width: 200px;
$border-width: 1px;
$clip-width: 30px;
$button-color: #fed75d;
$animate-duration: 5s;

html,
body {
  height: 100%;
  padding: 0;
  margin: 0;
}

body {
  background-color: #1d1d1d;
  // border: 1px solid transparent;
  // box-sizing: border-box;
  // position: absolute;
  width: 100%;
  float: left
}

.animated-button {
  position: relative;
  display: block;
  width: $button-width;
  height: $button-width/2;
  margin: 50px auto;
  box-sizing: border-box;
  text-align: center;
  font-size: 24px;
  line-height: $button-width/2;
  color: $button-color;

  &::after,
  &::before {
    content: "";
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    display: block;
    box-sizing: border-box;
    border: $border-width solid $button-color;
    transition: clip-path .5s ease-in-out;
  }

  &::before {
    clip-path: inset(0 $button-width - $clip-width $button-width / 2 - $clip-width 0);
  }

  &::after {
    clip-path: inset($button-width / 2 - $clip-width 0 0 $button-width - $clip-width);
  }

  &:hover {

    &::after,
    &::before {
      clip-path: inset(0 0 0 0);
    }
  }
}

.animated-button1 {
  position: relative;
  display: block;
  width: $button-width;
  height: $button-width;
  margin: 50px auto;
  box-sizing: border-box;
  text-align: center;
  font-size: 24px;
  line-height: $button-width;
  color: $button-color;

  &::after,
  &::before {
    content: "";
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    display: block;
    box-sizing: border-box;
    border: $border-width solid $button-color;
    transition: clip-path .5s ease-in-out;
    clip-path: inset(70% 0 0 30%);
    // background: rgba($button-color, 0.1);
    animation: border-animate $animate-duration linear infinite;
  }

  &::after {
    animation-delay: $animate-duration * -.5;
  }

  @keyframes border-animate {

    0%,
    100% {
      clip-path: inset(0 0 $button-width - $border-width 0);
    }

    25% {
      clip-path: inset(0 $button-width - $border-width 0 0);
    }

    50% {
      clip-path: inset($button-width - $border-width 0 0 0);
    }

    75% {
      clip-path: inset(0 0 0$button-width - $border-width );
    }
  }
}

.border-box {
  width: $button-width;
  height: $button-width;
  text-align: center;
  font-weight: bold;
  font-size: 20px;
  line-height: $button-width;
  color: white;
  margin: 50px auto;
  border: 5px solid;
  background-image: linear-gradient(45deg, #ffadad, #ffd6a5, #fdffb6, #9bf6ff, #a0c4ff, #bdb2ff, #ffc6ff);
  border-image: linear-gradient(45deg, #ffadad, #ffd6a5, #fdffb6, #9bf6ff, #a0c4ff, #bdb2ff, #ffc6ff) 1;
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  animation: border-animate1 3s linear infinite;
}

@keyframes border-animate1 {
  from {
    filter: hue-rotate(0deg);
  }

  to {
    filter: hue-rotate(360deg);
  }
}